<template>
    <div class="record">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="修改记录" name="1">
                <el-table :data="tableData" tooltip-effect="dark" style="width: 100%" border size="mini" v-loading="loading">
                    <el-table-column label="变动事件">
                        <template slot-scope="scope">
                            <span>{{ DictionConstUtil.RiskModifyType[scope.row.modifyType] }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="checkReason" label="复核原因" show-overflow-tooltip :formatter="formatterTest"> </el-table-column>
                    <el-table-column prop="modifyDate" label="变动时间" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span> {{ dateFormat(scope.row.modifyDate) }} {{ timeFormat(scope.row.modifyTime) }} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="modifyUser" label="操作员" show-overflow-tooltip></el-table-column>
                    <el-table-column label="复核状态" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{ DictionConstUtil.modifyStatus[scope.row.modifyStatus] }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="checkDate" label="复核时间" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span> {{ dateFormat(scope.row.checkDate) }} {{ timeFormat(scope.row.checkTime) }} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="checkUser" label="复核员" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="" label="操作" width="90">
                        <template slot-scope="scope">
                            <RiskIconButton
                                type="primary"
                                icon="el-icon-view"
                                topTitle="查看比对记录"
                                size="mini"
                                :disabled="scope.row.modifyType === '1'"
                                @on-click="lookInfo(scope.row, scope.$index)"
                            >
                            </RiskIconButton>
                        </template>
                    </el-table-column>
                </el-table>
            </el-collapse-item>
            <el-collapse-item title="详情" name="2">
                <div class="edit-div">
                    <EntryItemCompare
                        v-if="editDatas.EntryControl && editDatas.EntryControl.length > 0"
                        title="条目基本信息"
                        :data="editDatas.EntryControl"
                    />
                    <EntryItemCompare
                        v-if="editDatas.EntryBranch && editDatas.EntryBranch.length > 0"
                        title="条目分支信息"
                        :data="editDatas.EntryBranch"
                    />
                    <EntryItemCompare
                        v-if="editDatas.EntryBranchConfig && editDatas.EntryBranchConfig.length > 0"
                        title="条目分支范围配置信息"
                        :data="editDatas.EntryBranchConfig"
                    />
                    <EntryItemCompare
                        v-if="editDatas.RiskEntryParam && editDatas.RiskEntryParam.length > 0"
                        title="高级设置信息"
                        :data="editDatas.RiskEntryParam"
                    />
                    <EntryItemCompare
                        v-if="editDatas.EntryFundConfig && editDatas.EntryFundConfig.length > 0"
                        title="基金范围信息"
                        :data="editDatas.EntryFundConfig"
                    />
                    <EntryItemCompare
                        v-if="editDatas.RiskCustomResidualMaturity && editDatas.RiskCustomResidualMaturity.length > 0"
                        title="条目自定义设置-剩余期限参数"
                        :data="editDatas.RiskCustomResidualMaturity"
                    />
                    <EntryItemCompare
                        v-if="editDatas.RiskCustomApprovalTier && editDatas.RiskCustomApprovalTier.length > 0"
                        title="条目自定义设置-审批层级参数设置"
                        :data="editDatas.RiskCustomApprovalTier"
                    />
                    <EntryItemCompare
                        v-if="editDatas.RegulationsPublicOffering && editDatas.RegulationsPublicOffering.length > 0"
                        title="条目自定义设置-法规公募"
                        :data="editDatas.RegulationsPublicOffering"
                    />
                    <EntryItemCompare
                        v-if="editDatas.RegulationsOnlyDoorGather && editDatas.RegulationsOnlyDoorGather.length > 0"
                        title="条目自定义设置-法规专户(集合)"
                        :data="editDatas.RegulationsOnlyDoorGather"
                    />
                    <EntryItemCompare
                        v-if="editDatas.RegulationsOnlyDoorSingle && editDatas.RegulationsOnlyDoorSingle.length > 0"
                        title="条目自定义设置-法规专户(单一)"
                        :data="editDatas.RegulationsOnlyDoorSingle"
                    />
                    <EntryItemCompare
                        v-if="editDatas.JoinRiskEntryControls && editDatas.JoinRiskEntryControls.length > 0"
                        title="条目关联"
                        :data="editDatas.JoinRiskEntryControls"
                    />
                    <EntryItemCompare
                        v-if="editDatas.MutualRiskEntryControls && editDatas.MutualRiskEntryControls.length > 0"
                        title="条目互斥"
                        :data="editDatas.MutualRiskEntryControls"
                    />
                    <EntryItemCompare
                        v-if="editDatas.PremiseRiskEntryControls && editDatas.PremiseRiskEntryControls.length > 0"
                        title="前提条目"
                        :data="editDatas.PremiseRiskEntryControls"
                    />
                    <EntryItemCompare
                        v-if="editDatas.ConsecutiveViolationDays && editDatas.ConsecutiveViolationDays.length > 0"
                        title="连续违规天数"
                        :data="editDatas.ConsecutiveViolationDays"
                    />
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import DictionConstUtil from '@/utils/diction-const-util';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import { timeFormat, dateFormat } from '@/utils/tools';
import { mixins } from 'vue-class-component';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';
import EntryItemCompare from './item-compare.vue';

@Component({
    name: 'ItemUpdateRecord',
    components: {
        RiskIconButton,
        EntryItemCompare,
    },
})
export default class ItemUpdateRecord extends mixins(RiskEmitter) {
    @Prop() itemData: any;
    activeNames: string = '1';
    tableData: any[] = [];
    loading: boolean = false;
    DictionConstUtil: any = DictionConstUtil;
    private timeFormat = timeFormat;
    private dateFormat = dateFormat;
    editDatas: any = {};

    mounted() {
        this.getRecordData();
    }

    getRecordData() {
        const urlH = '/entry';
        this.$axios.get(urlH + '/update/record/' + this.itemData.content).then((res: any) => {
            this.tableData = res;
        });
    }

    lookInfo(val: any, index: any) {
        let lastRecord = this.tableData[index + 1];
        let data = {
            entryCode: val.entryCode,
            afterSerialNo: val.serialNo,
            afterChangeNo: val.changeNo,
            beforeSerialNo: lastRecord.serialNo,
            beforeChangeNo: lastRecord.changeNo,
        };
        const urlH = '/entry';
        this.$axios.post(urlH + '/compare/record', data).then((res: any) => {
            this.editDatas = res;
            this.activeNames = '2';
        });
    }

    handleChange() {}
    formatterTest(val) {
        console.log('val', val);
        if (val.checkReason == '' || val.checkReason == null) {
            return '--';
        } else {
            return val.checkReason;
        }
    }
}
</script>
<style lang="scss" scoped>
.record {
    color: #222;
    padding: 10px;
    height: calc(100vh - 50px);
}
</style>
